<template>
  <div>
<!--    <div class="bgc">-->

<!--    </div>-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <van-nav-bar
          title="个人信息"
          left-arrow
          @click-left="onClickLeft"

      />
<!--      style="background-color: rgba(255,200,0,.7)"-->
      <!--头像信息-->

      <div class="content">
        <div class="item defl">
          <div>头像</div>
          <div>
            <img class="headImg" :src="uploader" alt="">
          </div>
        </div>
        <div>
        </div>
        <div class="item defl">
          <div>昵称</div>
          <div class="oneLine" style="max-width: 200px">
            <span>{{ valuetext }}</span>
<!--            <van-icon name="arrow"/>-->
          </div>
        </div>
        <div class="item defl">
          <div>性别</div>
          <div>{{ valueSexText == '0' ? '男' : '女' }}</div>

        </div>
        <div class="item">
          <div class="defl">
            <div>手机号</div>
            <div>
              {{ valuePhonenumber }}
              <van-icon name="arrow"/>
            </div>
          </div>
          <p>{{ tipsP }}</p>
        </div>
        <div class="item defl">
          <div>密码</div>
          <div>
            {{ valuepass }}
            <van-icon name="arrow"/>
          </div>
        </div>
        <router-link tag="div" class="buttonDiv" to="/information">修改个人信息</router-link>
        <div @click="onClickSignLeave">
          <router-link tag="div" class="buttonDiv" to="#">退出登录</router-link>
        </div>
      </div>
      <div style="width: 100%">
<!--        <img src="../assets/wow.gif" alt="" style="width: 100%">-->


      </div>
<!--      <EyeMove></EyeMove>-->
    </van-pull-refresh>


  </div>
</template>

<script>
// import {Toast} from "vant";
// import {PhoneSignApiddd} from "@/api/api";

import {Toast} from "vant";
import {personalInformation, Signout} from "@/api/api";
// import EyeMove from "@/components/EyeMove";

export default {
  name: "PersonalInformationPage",
  data() {
    return {
      valuetext: '昵称',
      valuePhonenumber: '12345678912',
      valuepass: '*****',
      valueSexText: '0',
      tipsP: '',
      uploader: 'https://img01.yzcdn.cn/vant/leaf.jpg',
      userId: 12,
      isLoading: false,
    }
  },
  components:{
    // EyeMove,
  },
  methods: {

    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    //点击返回
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1)
    },
    //退出登录
    onClickSignLeave() {
      Signout().then(res => {
        this.$store.state.isLogin = false
        this.$store.state.userInfo = {}
        Toast(res.data.msg)
        this.$router.push({path:'/index'})
      })
    }
  },
  created() {
    personalInformation().then(res => {
      this.valuetext = res.data.data.userName
      this.valuePhonenumber = res.data.data.phonenumber
      this.valueSexText = res.data.data.sex
      this.uploader = res.data.data.avatar
      this.userId = res.data.data.userId
    })
  }
}
</script>

<style scoped lang="less">
.Centext {
  text-align: center;
}
//.bgc{
//  //background-image: url('../assets/bgc.jpg');
//  //background-image: url('../assets/logo.png');
//  background-size: 250px;
//  background-repeat: no-repeat;
//  //background-position: 0 0;
//  background-position: bottom left;
//  height: 100vh;
//  width: 100%;
//  filter: blur(5px);
//  position: absolute;
//}
.defl {
  display: flex;
  justify-content: space-between;
}

.deflLeft {
  display: flex;
  justify-content: left;
}

//导航栏
//.headBox {
//  background-color: #FF0000;
//  line-height: 64px;
//  height: 64px;
//  color: white;
//  margin-bottom: 32px;
//
//  div {
//    width: 100px;
//    text-align: center;
//  }
//
//  .headTop {
//    padding-left: 18px;
//
//    i {
//      font-size: 22px;
//    }
//  }
//}

//头像
.content {
  padding-top: 20px;
  .item {
    padding: 4px;
    margin: 0 25px;
    //height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #cdcdcd;

    input {
      border: 0px;
      text-align: right;
    }

    .inputText {
      padding: 0;
      line-height: 40px;
      font-size: 16px;

      input {
        text-align: right !important;
      }
    }

    p {
      text-align: center;
      color: @blue;
    }

    img.headImg {
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }
  }

  .buttonDiv {
    width: 80%;
    margin: 15px auto;
    background-color: red;
    text-align: center;
    color: white;
    line-height: 35px;
    height: 35px;
    border-radius: 50px;
  }
}
</style>